<template>
  <VPage>
    <VTable ref="tableRef" v-bind="tableOptins">
      <template #toolbar_btns>
        <VButton auth="/pmc/base/asinStrategy/add" type="primary" @click="openDtl('add')"> 新增 </VButton>
        <VButton auth="/pmc/base/asinStrategy/enable" @click="handleStatus(1)">
          <VStatus :value="true" />
        </VButton>
        <VButton auth="/pmc/base/asinStrategy/disable" @click="handleStatus(0)">
          <VStatus :value="false" />
        </VButton>

        <!-- <el-button icon="Plus" type="primary" @click="openDtl('add')">新增</el-button>

        <el-button @click="handleStatus(1)">
          <div class="dk-iconfont icon-CircleCheck text-[#3487FF]" />
          启用
        </el-button>
        <el-button @click="handleStatus(0)"><svg-icon icon-class="state_disabled" class="text-[red] mr-[4px]" />禁用</el-button> -->
      </template>
    </VTable>

    <!-- 日志 -->
    <XLog ref="logRef" :api="asinStrategyLog"></XLog>
    <Details ref="DetailsRef" @refresh="query" />
  </VPage>
</template>

<script setup lang="jsx">
import { asinStrategyList, asinStrategyDelete, asinStrategyLog, batchUpdateAField } from "@/api/base"

import { ElMessage, ElMessageBox } from "element-plus"
import { onMounted, ref, toRefs } from "vue"
import XForm from "@/components/XForm/index.vue"

import Details from "./components/details/index.vue"
const DetailsRef = ref()
const openDtl = (type, row = {}) => {
  if (type == "add") {
    DetailsRef.value.open({ type, id: row.id })
  } else {
    DetailsRef.value.open({ type, id: row.id })
  }
}
// 日志
import XLog from "@/components/XLog"
const logRef = ref()

const tableRef = ref()
// 获取已选中的行
const getSelectRow = () => {
  const getCheckboxRecords = tableRef?.value.$table.getCheckboxRecords()
  if (!getCheckboxRecords.length) {
    ElMessage({ showClose: true, message: "请至少选择一条数据！", type: "warning" })
    return false
  }
  return getCheckboxRecords?.map((v) => v.id)
}

// 启用 禁用
const handleStatus = (status) => {
  const ids = getSelectRow()
  if (!ids.length) {
    return false
  }
  ElMessageBox.confirm(`此操作将 ${status ? "启用" : "禁用"} ${ids.length}条数据, 是否继续?`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    confirmButtonClass: "oms-message-confirm-button",
  }).then(async () => {
    try {
      let params = { ids, field_name: "status", field_value: status }
      batchUpdateAField(params).then((res) => {
        ElMessage.success("操作成功")
        query()
      })
    } catch (e) {
      throw Error(e)
    }
  })
}
// 查询
const query = () => {
  tableRef?.value.query()
}
// 枚举 数据
const originOption = ref({
  transportationOpt: [
    { label: "快递", value: 10 },
    { label: "空运", value: 11 },
    { label: "快海运", value: 12 },
    { label: "慢海运(海卡)", value: 13 },
    { label: "铁运", value: 14 },
    { label: "卡航", value: 15 },
    { label: "邮政小包", value: 16 },
    { label: "专线小包", value: 17 },
    { label: "其他", value: 18 },
  ],
  // amazonSite: [],
})

//获取下拉数据
onMounted(async () => {})
// 列表配置
const tableOptins = reactive({
  formConfig: {
    data: {},
  },
  showOverflow: false,
  columns: [
    { type: "checkbox", fixed: "left", width: 40 },
    { field: "strategy_name", title: "策略名称" },
    {
      field: "product_category_text",
      title: "商品分类",
      slots: {
        default: ({ row }) => (
          <el-tooltip effect="dark" raw-content={true} content={row.product_category_text?.join("<br/>")} placement="right-start" show-after={200}>
            <VText value={row.product_category_text?.[0]} line={2} />
          </el-tooltip>
        ),
      },
    },
    {
      field: "status_text",
      title: "状态",
      width: 120,
      slots: {
        default: ({ row }) => <VStatus value={row.status_text === "启用"} />,
      },
    },
    { field: "created_by", title: "创建人", width: 120 },
    { field: "created_at", title: "创建时间", width: 200 },
    {
      title: "操作",
      width: 200,
      fixed: "right",
      slots: {
        default: ({ row }) => {
          return [
            <div>
              <el-button link onClick={() => openDtl("look", row)}>
                查看
              </el-button>
              <el-button link type="primary" onClick={() => openDtl("edit", row)}>
                编辑
              </el-button>
              <el-button link type="danger" onClick={() => delItem(row)}>
                删除
              </el-button>

              <el-button link type="primary" onClick={() => logRef?.value.open({ id: row.id })}>
                日志
              </el-button>
            </div>,
          ]
        },
      },
    },
  ],
  proxyConfig: {
    ajax: {
      query: ({ page, form }) => {
        let params = {}
        return asinStrategyList(params)
      },
    },
  },
})
const delItem = (row) => {
  ElMessageBox.confirm(`此操作将删除数据, 是否继续?`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    confirmButtonClass: "oms-message-confirm-button",
  }).then(async () => {
    try {
      let params = { id: row.id }
      asinStrategyDelete(params).then((res) => {
        ElMessage.success("操作成功")
        query()
      })
    } catch (e) {
      throw Error(e)
    }
  })
}
</script>
<style lang="scss" scoped>
.sku-title {
  width: 100%;
  padding: 8px;
  background: #eaf3ff;
  border-radius: 4px;
}
</style>
